<template>
  <div class="calendar">
    <!-- <div class="left"><el-calendar v-model="value" /></div> -->
    <div class="left">
      <el-calendar>
        <template #date-cell="{ data }">
          <div @click="clickDay(data)" class="box">
            <p>{{ data.day.split('-')[2] }}</p>
          </div>
        </template>
      </el-calendar>
    </div>
    <div class="right">
      <div class="header">
        <el-icon class="icon-left" @click="yesterday()"><ArrowLeftBold /></el-icon>
        <span>{{ currentDay }}</span
        ><span>{{ formatWeek(currentWeek) }}</span>
        <el-icon class="icon-right" @click="tomorrow()"><ArrowRightBold /></el-icon>
      </div>
      <div class="todo-body">
        <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
          <el-form-item label="一级分类" prop="leave1" @change="updateChild">
            <el-radio-group v-model="formData.leave1">
              <el-radio v-for="item in list" :value="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
              <el-form-item label="二级分类" prop="leave2">
            <el-radio-group v-model="formData.leave2">
              <el-radio v-for="item in list2" :value="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="金额" prop="price">
            <el-input v-model="formData.price" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="formData.depict" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs' // ES 2015
import { ref,watch, reactive, onMounted, onUpdated } from 'vue'
import { getTags, addBook, getBook, deleteBookApi, editBook } from '@/api/book' //api/后面不能大写Mgmt

const currentDay = ref(dayjs().format('YYYY-MM-DD')) //当前日期
const currentWeek = ref(dayjs(currentDay.value).day()) //当前星期 0,1,2,3,4,5,6
//前一天
const yesterday = () => {
  let day = dayjs(currentDay.value).subtract(1, 'days').format('YYYY-MM-DD')
  currentWeek.value = dayjs(day).day()
  currentDay.value = day
}
//后一天
const tomorrow = () => {
  let day = dayjs(currentDay.value).add(1, 'days').format('YYYY-MM-DD')
  currentWeek.value = dayjs(day).day()
  currentDay.value = day
}
// 星期格式化
const formatWeek = (value) => {
  let arr = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'])
  return arr.value[value]
}

const formData = ref({
  leave1: '',
  leave2: '',
  price: '',
  depict: ''
})

const rules = reactive({
  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
})
const listAll = ref<any>([])
const list = ref<any>([])
const list2 = ref<any>([])
const ruleFormRef = ref<any>(null)
const submitForm = () => {
    ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      let param:any = {}
      param.time = currentDay.value
      param.leave1 = listAll.value.find((item) => item.id === formData.value.leave1).name
      param.leave2 = listAll.value.find((item) => item.id === formData.value.leave2).name
      param.price = formData.value.price
      param.depict = formData.value.depict
      const res = await addBook(param)
      if (res.code === 200) {
        ElMessage({ type: 'success', message: '添加成功' })
        formData.value.price=''
        formData.value.depict=''
      }
    }
  })
}

const clickDay = (data) => {
  console.log(data)
  currentDay.value = data.day
}

const initData = async () => {
  const res = await getTags()
  if (res.code === 200) {
      listAll.value = res.data
      list.value=res.data.filter((item) => {
        return item.pid === 0
      })
      formData.value.leave1=list.value[0].id;
      getChild()
  }
}
const getChild = ()=>{
  list2.value=listAll.value.filter((item) => {
    return item.pid === formData.value.leave1
  })
  formData.value.leave2=list2.value[0].id;
}

//监听单个ref定义的值
// 监听 formData 中的 leave1 属性
watch(() => formData.value.leave1, (newValue, oldValue) => {
  console.log('leave1 changed:', newValue, oldValue)
  // 当 leave1 改变时，更新二级分类列表
  getChild()
})
onMounted(() => {
  console.log('组件挂载完成！')
  initData()
})
</script>
<style lang="scss" scoped>
.calendar {
  display: flex;
  .left {
    width: 500px;
  }
  .right {
    width: 500px;
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
    }
    .icon-left {
      color: red;
      font-size: 20px;
      margin-right: 10px;
    }
    .icon-right {
      color: red;
      font-size: 20px;
      margin-left: 10px;
    }
    .todo-body {
      width: 100%;
      height: 376px;
      border: 1px solid #ddd;
    }
  }
  .box {
    width: 100%;
    height: 100%;
    .workTime {
      color: red;
      border: 1px solid #ddd;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: inline-block;
      text-align: center;
    }
  }
}
</style>
